import Banner from '../Banner/index';
import Mode from '../Mode/index';
import Action from '../Action/index';
import './home.less';
import { useEffect, useState, useRef } from 'react';
import { Popup, Picker, Dialog, Toast } from 'react-vant';
import {
  timeHourColumn,
  timeMinColumn,
  time30Column,
  deviceId
} from '../../utils/staticData';
import { runningTextConvert, btnFitersText } from '../../utils/filters';

export default function Home() {
  // 定时器变量
  const intervalId = useRef<NodeJS.Timeout | null>(null);
  /**
   * 当设备离线的时候，将 status设置为 2，待机状态
   */

  const defaultColumns = [timeHourColumn(), time30Column()];
  const [columns, setColumns] = useState(defaultColumns);

  const [preTimeList, setPreTimeList] = useState<string[]>(['1', '1']);

  const timeVisible: string = 'time';

  /**
   * 直接定义变量和使用useState钩子有以下区别：
   * 1. 直接定义变量： 直接在函数组件中定义变量时，它表现为普通的JavaScript变量。
   * 当变量发生变化时，不会触发组件的重新渲染，除非显式地重新渲染组件。
   * 2. useState钩子： useState是React中的内置钩子，允许函数组件管理状态。
   * 当你使用useState声明状态变量时，React会在状态变量更新时自动触发组件的重新渲染，从而确保组件反映更新后的状态值。
   */
  interface IState {
    mode: number; // 模式
    status: number; // 运行状态: 0 = 待机 1=运行中 2=保温中 3=预约中 4=离线
    switch: number; // 开始/取消: 0=取消 1=开始
    preTime: number; // 预约时间
    setWorkTime: number; // 运行时间
    warmDuration: number; // 保温时间
    fault: number; // 0=无故障 1-5:有故障
    isOnline: boolean; // false=离线 true=在线
  }
  const [visibleStr, setVisibleStr] = useState<String>('');
  const [btnTitle, setBtnTitle] = useState<String>('开始烹饪');
  const [deviceInfo, setDeviceInfo] = useState<IState>({
    mode: 0,
    status: 0,
    switch: 0,
    preTime: 0,
    setWorkTime: 0,
    warmDuration: 0,
    fault: 0,
    isOnline: true
  });

  const [minsList, setMinsList] = useState<number[]>([0, 30]);

  // 根据status，设置按钮文字
  useEffect(() => {
    if (
      deviceInfo.status === 1 ||
      deviceInfo.status === 2 ||
      deviceInfo.status === 3
    ) {
      setBtnTitle('取消');
    }
  }, [deviceInfo.status]); // Specify the dependency array to listen for changes in yourVariable

  useEffect(() => {
    console.log(minsList[0], '第一列数据边哈了');
    if (minsList[0] == 0) {
      setColumns(defaultColumns);
    } else if (minsList[0] == 24) {
      setColumns([timeHourColumn(), [{ text: '0', value: '0' }]]);
    } else {
      setColumns([timeHourColumn(), timeMinColumn()]);
    }
  }, [minsList[0]]);

  // 预约时间
  useEffect(() => {
    console.log(deviceInfo.preTime, '预约时间');
    const h = Math.floor(deviceInfo.preTime / 60);
    const m = deviceInfo.preTime % 60;
    setPreTimeList([`${h}`, `${m}`]);
    console.log(preTimeList, 'preTimeList');
  }, [deviceInfo.preTime]);

  // 轮询快照接口
  useEffect(() => {
    // 这里是副作用的逻辑，类似于 componentDidMount
    intervalId.current = setInterval(() => {
      // 在这里执行你想要的操作
      getDeviceInfo();
    }, 1000);
    return () => {
      // 这里是清理副作用的逻辑，类似于 componentWillUnmount
      // 在组件卸载时清除定时器
      if (intervalId.current) {
        clearInterval(intervalId.current); // 清除定时器
      }
    };
  }, []); // 依赖数组为空，只在组件挂载和卸载时执行一次
  const Hejia = (window as any).Hejia;
  useEffect(() => {
    Hejia.ready(function () {
      // 页面加载完成后要立即调用Hejia全局对象执行的代码逻辑写这里
      getDeviceInfo();
    });
  }, []);

  // 解析获取到的设备信息数据
  const parseData = (params: any) => {
    params.forEach((e: any) => {
      let value = Number(e.value);

      const keys = [
        'switch',
        'mode',
        'preTime',
        'setWorkTime',
        'warmDuration',
        'status',
        'fault'
      ];

      if (keys.includes(e.name)) {
        setDeviceInfo(pre => ({
          ...pre, // 使用对象展开符复制原对象的属性
          [e.name]: value // 更新特定属性的值
        }));
      }

      console.log(deviceInfo, '设备数据');
    });
  };
  /**
   * 轮询事件
   */
  const getDeviceInfo = () => {
    // deviceId
    Hejia.getDeviceInfo(
      {},
      function (obj: any) {
        if (obj.device == undefined) return;

        /**
         * 第一级别：离线，设备离线级别最高，如果设备是离线状态，需要展示离线页面
         * 第二级别：故障
         */
        // 设备是否在线, 设置离线状态
        // 设备是否在线, 设置离线状态
        setDeviceInfo(pre => ({
          ...pre, // 使用对象展开符复制原对象的属性
          isOnline: obj.device.connected // 更新特定属性的值
        }));

        if (!obj.device.connected) {
          setDeviceInfo(pre => ({
            ...pre, // 使用对象展开符复制原对象的属性
            isOnline: false,
            status: 0,
            switch: 0,
            preTime: 0,
            warmDuration: 0,
            setWorkTime: 0,
            mode: 0,
            fault: 0
          }));
          return;
        }
        // 设备是否在线，设置故障状态
        if (obj.device.fault) {
          setDeviceInfo(pre => ({
            ...pre, // 使用对象展开符复制原对象的属性
            fault: obj.device.fault
          }));
        }

        parseData(obj.device.parameters);
      },
      function (msg: any, obj: any) {
        console.log(msg, '设备参数报错了---');
        console.log(obj.resultCode + obj.resultCodeMessage);
      }
    );
  };
  /**
   * @description 用于用户点击一个功能，点击需要停止轮询，成功后再继续困徐
   * @param {boolean} val true=>开启轮询 false=>关闭轮询
   */
  const handleLoopClick = (val: boolean) => {
    // true=>开启轮询 false=>关闭轮询
    if (val) {
      if (intervalId.current) {
        clearInterval(intervalId.current);
      }
      intervalId.current = setInterval(() => {
        // 在这里执行你想要的操作
        getDeviceInfo();
      }, 1000);
    } else {
      if (intervalId.current) {
        clearInterval(intervalId.current);
      }
    }
  };

  const onCancleApp = () => {
    onClose();
    setTimeout(() => {
      setDeviceInfo(pre => ({
        ...pre, // 使用对象展开符复制原对象的属性
        preTime: 0
      }));
    }, 50);
    Hejia.setControlParam(
      {
        // deviceId,
        parameters: {
          param: [
            {
              name: 'preTime',
              content: 0
            }
          ]
        }
      },
      function () {
        // success, no response
        console.log('success');
        onClose();
      },
      function (msg: string, obj: any) {
        console.log(msg + obj.resultCode + obj.resultCodeMessage);
      }
    );
  };

  const handleModeChange = (val: number) => {
    console.log('handleModeChange:', val);
  };

  const onClose = () => setVisibleStr('');

  const onAppPop = () => setVisibleStr('time');
  const onCooker = () => {
    if (!deviceInfo.mode) {
      Toast.info('请先设置模式');
      return;
    }
    if (
      deviceInfo.status === 1 ||
      deviceInfo.status === 2 ||
      deviceInfo.status === 3
    ) {
      let msg = `设备${runningTextConvert(
        deviceInfo.status
      )}中，确定要取消${runningTextConvert(deviceInfo.status)}吗？`;
      if (deviceInfo.status === 1) {
        msg = `设备${runningTextConvert(
          deviceInfo.status
        )}中，确定要取消烹饪吗？`;
      }
      Dialog.confirm({
        message: msg,
        confirmButtonText: '确定',
        confirmButtonColor: 'var(--primary-color)',
        onCancel: () => {},
        onConfirm: () => {
          handleLoopClick(false);
          setDeviceInfo(pre => ({
            ...pre, // 使用对象展开符复制原对象的属性
            status: 0 // 更新特定属性的值
          }));
          // 取消烹饪
          Hejia.setControlParam(
            {
              // deviceId,
              parameters: {
                param: [
                  {
                    name: 'switch',
                    content: 0
                  }
                ]
              }
            },
            function () {
              // success, no response
              handleLoopClick(true);
              console.log('success');
            },
            function (msg: string, obj: any) {
              console.log(msg + obj.resultCode + obj.resultCodeMessage);
            }
          );
        }
      });
    } else {
      // 开始烹饪
      handleLoopClick(false);
      if (deviceInfo.preTime) {
        setDeviceInfo(pre => ({
          ...pre, // 使用对象展开符复制原对象的属性
          status: 3 // 预约中
        }));
      } else {
        setDeviceInfo(pre => ({
          ...pre, // 使用对象展开符复制原对象的属性
          status: 1 // 运行中
        }));
      }

      Hejia.setControlParam(
        {
          // deviceId,
          parameters: {
            param: [
              {
                name: 'switch',
                content: 1
              }
            ]
          }
        },
        function () {
          // success, no response
          handleLoopClick(true);
          console.log('success');
        },
        function (msg: string, obj: any) {
          console.log(msg + obj.resultCode + obj.resultCodeMessage);
        }
      );
    }
  };

  return (
    <div className="home">
      <div>
        <Banner
          propsBanner={{
            status: deviceInfo.status,
            fault: deviceInfo.fault,
            isOnline: deviceInfo.isOnline,
            preTime: deviceInfo.preTime,
            setWorkTime: deviceInfo.setWorkTime,
            warmDuration: deviceInfo.warmDuration
          }}
        />
        <Mode
          props={{
            mode: deviceInfo.mode,
            isOnline: deviceInfo.isOnline,
            status: deviceInfo.status
          }}
          handleModeChange={handleModeChange}
          onLoopClick={handleLoopClick}
        />

        <Action
          propsAction={{
            setWorkTime: deviceInfo.setWorkTime,
            isOnline: deviceInfo.isOnline,
            status: deviceInfo.status,
            mode: deviceInfo.mode
          }}
        />
        <div className="home-mask-wapper">
          {(!deviceInfo.isOnline ||
            (deviceInfo.status === 0 && deviceInfo.mode === 0)) && (
            <div className="mask"></div>
          )}
          <div className="footer">
            {deviceInfo.status == 0 && (
              <div className="appointment-btn">
                {deviceInfo.mode === 10 && <div className="app-mask"></div>}
                <div className="app-text" onClick={onAppPop}>
                  {deviceInfo.preTime ? '编辑预约' : '预约'}
                </div>
              </div>
            )}
            <div className="stop-btn" onClick={onCooker}>
              {btnFitersText(
                deviceInfo.status,
                deviceInfo.preTime,
                deviceInfo.mode
              )}
            </div>
          </div>
        </div>
      </div>

      {/* 预约时间弹框 */}
      <Popup
        round
        visible={timeVisible === visibleStr}
        position="bottom"
        onClose={onClose}
      >
        <div className="app-wrapper">
          <Picker
            value={preTimeList}
            title={deviceInfo.preTime ? '编辑预约' : '预约'}
            placeholder=""
            columns={columns}
            onChange={(val: any): void => {
              setMinsList(val);
            }}
            onCancel={() => onClose()}
            onConfirm={() => {
              const mins: number =
                Number(minsList[0]) * 60 + Number(minsList[1]);
              console.log(mins, 'mins');
              onClose();

              setTimeout(() => {
                setDeviceInfo(pre => ({
                  ...pre, // 使用对象展开符复制原对象的属性
                  preTime: mins
                }));
              }, 50);

              Hejia.setControlParam(
                {
                  // deviceId,
                  parameters: {
                    param: [
                      {
                        name: 'preTime',
                        content: mins
                      }
                    ]
                  }
                },
                function () {
                  // success, no response
                  console.log('success');
                },
                function (msg: string, obj: any) {
                  console.log(msg + obj.resultCode + obj.resultCodeMessage);
                }
              );
            }}
          />
          <div
            className="unit unit-hour"
            style={{
              top: deviceInfo.preTime ? 'calc(50% - 6px)' : 'calc(50% + 22px)'
            }}
          >
            小时
          </div>
          <div
            className="unit unit-min"
            style={{
              top: deviceInfo.preTime ? 'calc(50% - 6px)' : 'calc(50% + 22px)'
            }}
          >
            分钟
          </div>
          {deviceInfo.preTime ? (
            <div className="cancel-app" onClick={onCancleApp}>
              取消预约
            </div>
          ) : null}
        </div>
      </Popup>
    </div>
  );
}
